<template>
	<view style="background-color: #f4f4f4; width:  100%; height: 800px;">
		  <div style="height: 10px;"></div>
		  <view class="body" @click="toxiangqing(a.id)" v-for="a in collectlist" :key="a.id">
			
			<u-row style="margin-top: -15px;">
				<u-col span=4>
					<div style="width: 60px; height: 20px; background-color:#a0cfff;position: relative;top: 25px;right:-50px;z-index: 1000; text-align: center;" v-if="a.transactionStatus==2" >竞价中</div>
					<div style="width: 60px; height: 20px; background-color:#fab6b6;position: relative;top: 25px;right:-50px;z-index: 1000; text-align: center;" v-if="a.transactionStatus==1" >待开拍</div>
					<div style="width: 60px; height: 20px; background-color:#fab6b6;position: relative;top: 25px;right:-50px;z-index: 1000; text-align: center;" v-if="a.transactionStatus==3" >已结束</div>
				<u--image class="image1" radius="10" width ="100px"  shape="filleted" height="110px"  :src="'http://101.43.223.224:8765/image/getImageById?id='+a.imgId.split(',')[0]"  ></u--image>		
				</u-col>
				<u-col span=6>
					<view style=" width: 100%; height: 30px; margin-bottom: 35px; "><p class="p1">{{a.goodsName}}</p></view>
						<view style="float: left; width: 100%; height: 30px; ">
							<p  style=" font-size: 13px;   margin-top: -10px;">收藏时间：{{a.createTime}}</p>
				
				<u-col span=7>
					<view style=" width: 150px; height: 20px; margin-top: 5px;" v-if="a.transactionStatus==1"><p class="p2">距开始：<text class="bb">2</text>天<text class="bb">12</text>:<text class="bb">05</text>:<text class="bb">08</text>	</p></view> 
					<view style=" width: 100%; height: 20px; " v-if="a.transactionStatus==2"><p class="p2" >结束时间2020年12月06日 12:20</p></view> 
					<view style=" width: 100%; height: 20px; " v-if="a.transactionStatus==4"><p class="p2" >结束时间2020年12月06日 12:20</p></view>
					<view style=" width: 100%; height: 20px; " v-if="a.transactionStatus==3"><p class="p2" >交易完成：<text class="bb">2</text>天<text class="bb">12</text>:<text class="bb">05</text>:<text class="bb">08</text>	</p></p></view> 
					
							</u-col>			
						</view>			
				</u-col>
			</u-row>
			  <u-divider text=""></u-divider>
			  	<p  style="float: left; color: red; font-size: 18px; margin-top: 5px; margin-left: 20px;">￥{{a.startPrice}}</p>
			  <u-button type="error" shape="circle" :plain="true" @click="orderdetails(a.id)" text="取消收藏" style="height: 40px; width: 80px; float: right;  margin-right: 20px;" ></u-button>
		  </view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id:1,
				userId:1,
				collectlist:[{
				id: '',
				goodsName:'', //拍卖名称
				startPrice:'',//起拍价钱
				imgId:'', //图片id
				createTime:'',
				transactionStatus:0, //拍卖状态
				startTime:'', //拍卖时间
				}],
			src:'/static/yc.jpg',
			}
		},
		mounted () {
            var userId = uni.getStorageSync("loginId")
            if(userId){
                this.userId = userId
            } 
		  this.listcollect() //地址单查
		},
		methods: {
            toxiangqing(id){
                uni.navigateTo({
                    url:'/pages/paiMaiXiangQing/paiMaiXiangQing?id='+id
                })
            },
			listcollect(){
				var that=this
				uni.request({
						url: "http://"+that.$host+":"+that.$port+"/table/tableList" ,               
							data:{
								userId:that.userId
							},
						method: 'GET',
						dataType: 'json',
						success (res) {
							that.collectlist = res.data.obj
							console.log(that.collectlist.lenght)
							that.collectlist.forEach(function(a){
							})
						},                  	
						});
			},
            orderdetails(goodsid){
                var that = this
                uni.request({
                    url:'http://'+that.$host+':'+that.$port+'/table/delCollect?userId='+that.userId+"&goodsid="+goodsid,
                    success(res) {
                        uni.showToast({
                            title:'取消成功',
                        })
                        that.listcollect()
                    }
                })
            },
				click(item) {
			     console.log('item', item);
			            },

		}
	}
</script>

<style>
.body{
	width: 95%;
	height: 215px;
	margin: 0 auto;
	border-radius:15px;
	margin-top: 10px;
	background-color: #fff;
}
.image1{
	margin-top: 5px;
	border-radius: 10px,10px;
	margin-left: 10px;
	/* float: left; */
}
.p1{
	font-size: 16px;
	font-weight: 500;
}
.p2{
		font-size: 12px;
}
</style>
